<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <link rel="stylesheet" href="bootstrap.css">
        <link rel="stylesheet" href="tp02_css.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="container">
        <!-- navbar -->
        <nav class="navbar navbar-inverse  navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">MOdule LO07</a>
                </div>
                <ul class="nav navbar-nav ">
                    <li><a href="#">TCBR</a></li>
                    <li><a href="#">FILLER</a></li>
                    <li><a href="#">CPASULE</a></li>
                    <li><a href="#">STAGE</a></li>
                    <li><a href="#">SE</a></li>
                </ul>
            </div>
         </nav>

      
       <!-- panel -->
       <div class="panel panel-success">
            <div class="panel-heading">Panel with panel-success class</div>
            <div class="panel-body">Panel Content</div>
       </div>
       <div class="panel panel-primary">
            <div class="panel-heading">Panel with panel-primary class</div>
            <div class="panel-body">Panel Content</div>
       </div>
       <!-- pagination -->
       <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" href="#">TCBR</a></li>
                <li class="page-item"><a class="page-link" href="#">FIL</a></li>
                <li class="page-item"><a class="page-link" href="#">Capsules</a></li>
                <li class="page-item"><a class="page-link" href="#">TPE</a></li>
                <li class="page-item"><a class="page-link" href="#">Stage</a></li>
                <li class="page-item"><a class="page-link" href="#">SE</a></li>
            </ul>
       </nav>
       <!-- panel avec badges-->
       <div class="panel panel-primary">
            <div class="panel-heading">Panel with panel-primary class</div>
            <div class="panel-body">Panel Content</div>
       </div>
       <button type="button" class="btn btn-primary">
            ATN <span class="badge badge-light">9</span>
            <span class="sr-only">unread messages</span>
        </button>
        <button type="button" class="btn btn-danger">
             IPL<span class="badge badge-light">30</span>
             <span class="sr-only">unread messages</span>
        </button>
        <button type="button" class="btn btn-success">
             VDC <span class="badge badge-light">29</span>
             <span class="sr-only">unread messages</span>
        </button>
        <!-- les grilles-->
        <p></p>
        <p></p>
        <div class="panel panel-primary">
            <div class="panel-heading">Panel with panel-primary class</div>
            <div class="panel-body">Panel Content</div>
        </div>
        <h3>Grille de 3 col</h3>
        <div class="row">
            <div class="col-sm-4">col 1</div>
            <div class="col-sm-4">col 2</div>
            <div class="col-sm-4">col 3</div>
        </div>
        <h3>Grille de 2et3 col</h3>
        <div class="row">
            <div class="col-sm-4">1 of 2</div>
            <div class="col-sm-8">2 of 2</div>
        </div>
        <div class="row">
            <div class="col-sm-2">1 of 3</div>
            <div class="col-sm-4">2 of 3</div>
            <div class="col-sm-6">3 of 3</div>
        </div>
        <h3>Grille de ex4</h3>    
            <div class="row">
            <div class="col-sm-2">1 of 3</div>
            <div class="col-sm-4">2 of 3</div>
            <div class="col-sm-6">3 of 3</div>
            </div>
      
       <!-- card avec image-->
      
       <div class="panel panel-primary">
            <div class="panel-heading">Panel with panel-primary class</div>
            <div class="panel-body">Panel Content</div>
       </div>
       <div class="row">
           <div class="col-sm-4">
             <div class="card" style="width: 18rem;">
                 <img src="image/atn.jpg" class="card-img-top" alt="ATN">
                    <div class="card-body">
                         <h4 class="card-title">ATN</h4>
                         <p class="card-text">la filière permet de comprendre comment ajouter, grâce au Système d'Information (SI), de la valeur à la plupart des activités de l’organisation.</p>
                    </div>
             </div>
            </div>
            <div class="col-sm-4">
             <div class="card" style="width: 18rem;">
                 <img src="image/2.jpg" class="card-img-top" alt="IPL">
                    <div class="card-body">
                         <h4 class="card-title">IPL</h4>
                         <p class="card-text">former à la conception et à la mise en œuvre de projets logiciels en équipe de la preuve de concept jusqu’à l’industrialisation de la production logicielle.</p>
                    </div>
             </div>
            </div>
           <div class="col-sm-4">
             <div class="card" style="width: 18rem;">
                 <img src="image/3.jpg" class="card-img-top" alt="VDC">
                    <div class="card-body">
                         <h4 class="card-title">VDC</h4>
                         <p class="card-text">développer les compétences qui permettent de passer de la donnée brute à de l’information actionnable tout en développant un regard critique sur les techniques utilisées.</p>
                    </div>
             </div>
            </div>
        </div>
       
      <!-- table -->

           <div class="panel panel-danger">
                <div class="panel-heading">Tbleaux</div>
                <div class="panel-body">Panel Content</div>
           </div>
           
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">ATN</th>
                        <th scope="col">IPL</th>
                        <th scope="col">VDC</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">CS</th>
                        <td>if09,if22</td>
                        <td>if05,if10</td>
                        <td>if11,if29</td>
                      </tr>
                      <tr>
                        <th scope="row">TM</th>
                        <td>if20,if34</td>
                        <td>if26,if31</td>
                        <td>if28,if34</td>
                      </tr>
                    </tbody>
                  </table>
       
     <!-- formul -->
     
     <form action="/action_page.php">
        <div class="form-group">
          <label for="nom">nom:</label>
          <input type="text" class="form-control" id="nom">
        </div>
        <div class="form-group">
          <label for="nom">prenom:</label>
          <input type="text" class="form-control" id="prenom">
        </div>
        <div class="form-group">
          <label for="email">Email address:</label>
          <input type="email" class="form-control" id="email">
        </div>
        <div class="form-group">
        <label for="radio">sexs:</label>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
            <label class="form-check-label" for="inlineRadio1">M</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
            <label class="form-check-label" for="inlineRadio2">F</label>
         </div>
        </div>
        <div class="form-group">
            <label class="my-1 mr-2" for="inlineFormCustomSelectPref">ORIGINAL DES ETUDE</label>
            <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
             <option selected>Choose...</option>
             <option value="1">TC et L'UTT</option>
             <option value="2">DUT</option>
             <option value="3">INFO</option>
              <option value="4">DUT EG21</option>
            </select>
        </div>
        <div class="form-group">
            <label for="radio">VALITARISATION:</label>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
                <label class="form-check-label" for="inlineRadio3">STO7</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4">
                <label class="form-check-label" for="inlineRadio4">ST09</label>
             </div>
             <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option5">
                <label class="form-check-label" for="inlineRadio5">ST10</label>
             </div>
        </div>
         <div class="form-group">
             <label for="moduel">moduel:</label>
             <select title="moduel" class="selectpicker">
                <optgroup label="CS">
                  <option>GLO2</option>
                  <option>NF16</option>
                  <option>NF20</option>
                </optgroup>
                <optgroup label="TM">
                  <option>IF09</option>
                  <option>IF14</option>
                  <option>LO02</option>
                </optgroup>
              </select>
             
         </div>
         <div class="form-group">
               <label for="info">infomation complementaire:</label>
               <input type="text" class="form-control" id="info">
         </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
         
     </div>
       
         
           
       
    </body>
</html>
